<template>
  <div class="parent-container">
    <h3>处理后的列表</h3>
    <EnhancedList :disabledIds="[1, 2, 4]">
      <!-- 原始插槽内容 -->
      <template #default>
        <template v-for="item in productList" :key="item.id">
          <div>
            <span>{{ item.name }}</span>
            <el-tag v-if="item.stock > 100" size="small">库存充足</el-tag>
            <el-tag v-else-if="item.stock > 0" size="small" type="warning">库存较少</el-tag>
            <el-tag v-else size="small" type="danger">已售罄</el-tag>
          </div>
        </template>
      </template>
    </EnhancedList>
    <div ref="mapRef"></div>
    <el-button @click="handleClick">点击</el-button>
    <titleName>123</titleName>
    <DefineTemplate>
      <template #default="{ title, onFoo }">
        <div>123</div>
        <div @click="onFoo(123)">{{ title }}</div>
      </template>
    </DefineTemplate>
    <UserTemplate title="自定义标题" @foo="console.log"></UserTemplate>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import EnhancedList from './EnhancedList.vue'
import { titleName, createTitleTemplate } from './slotItem'

const [DefineTemplate, UserTemplate] = createTitleTemplate()

// 模拟列表数据
const productList = ref([
  { id: 1, name: 'Vue 3 Pro', stock: 200, disabled: false },
  { id: 2, name: 'React Basic', stock: 50, disabled: false },
  { id: 3, name: 'Angular Pro', stock: 0, disabled: false },
  { id: 4, name: 'TypeScript Advanced', stock: 10, disabled: true }, // 被过滤项
  { id: 5, name: 'JavaScript Fundamentals', stock: 150, disabled: false }
])

const mapRef = ref(null)

const handleClick = () => {
  console.log(mapRef.value)
}
</script>

<style scoped>
.parent-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}
</style>
